<template>
  <div class="task-settings">
    <zk-searcher v-model="query" :options="searchColumns" />
    <w-block class="body" title="任务信息列表" style="margin-top: 10px">
      <template #list>
        <div class="btn-list">
          <el-button
            class="btn-list-item"
            type="primary"
            @click="handleAdd({ itemList: [] })"
          >增加
          </el-button
          >
          <el-button
            class="btn-list-item"
            type="warning"
            @click="handleUpdate()"
          >修改
          </el-button
          >
          <el-button class="btn-list-item" type="danger" @click="handleDelete"
          >删除
          </el-button
          >
        </div>
      </template>
      <zk-table
        :columns="tableColumns"
        :service="service"
        :query="query"
        use-selection
        :actions="actions"
        @onSelectionChange="onSelection"
      >
        <template #rel_template_flag="scope">
          <template v-if="isNotNullArr(scope.row.templateList)">
            <el-popover
              placement="right-start"
              title="选用模板"
              width="fit-content"
              trigger="hover"
            >
              <ul>
                <li
                  class="temp-item"
                  v-for="(item, i) in scope.row.templateList"
                >
                  <div v-if="item.typ === 'work'" class="circ"></div>
                  <span>{{ item.template_name }}</span>
                </li>
              </ul>
              <el-link slot="reference" type="primary">{{
                scope.row.rel_template_flag_desc
                }}
              </el-link>
            </el-popover>
          </template>
          <template v-else>{{ scope.row.rel_template_flag_desc }}</template>
        </template>
      </zk-table>
    </w-block>
    <w-dialog
      :visible.sync="visible"
      height="auto"
      :title="modalTitle"
      width="800px"
    >
      <el-form ref="modelForm" :model="model" label-width="100px">
        <el-row>
          <el-col
            v-for="item of formColumns"
            :key="item.key"
            :span="item.span || 14"
            :offset="5"
          >
            <div v-if="item.label == '任务编号'">
              <el-form-item
                :label="item.label"
                :prop="item.key"
                :rules="
                  item.required && [
                    {
                      required: true,
                      message: `请输入${item.label}`,
                      trigger: ['blur'],
                    },
                    {
                      max: 10,
                      message: `任务编号最大长度为10`,
                      trigger: ['blur'],
                    },
                  ]
                "
              >
                <zk-item-pool
                  v-model="model[item.key]"
                  :option="{ ...item, disabled: item.disabled }"
                />
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item
                :label="item.label"
                :prop="item.key"
                :rules="
                  item.required && [
                    {
                      required: true,
                      message: `请输入${item.label}`,
                      trigger: ['blur'],
                    },
                  ]
                "
              >
                <zk-item-pool
                  v-model="model[item.key]"
                  :option="{ ...item, disabled: item.disabled }"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <app-editable-table :columns="itemColumns" :list="model.itemList" />
      </el-form>
      <template #footer>
        <div class="flex-end">
          <el-button type="default" @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="doSubmit">保 存</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
  import { TYPE_ENUM } from "@/common/zk-constants"
  import { taskSettings as service } from "@/services"
  import { configurationOfImportantInformation as itemService } from "@/services"
  import AppEditableTable from "@/components/app-editable-table"
  import SearchTableCRUDMixin from "@/mixins/search-table-crud-mixin"

  const columns = [
    {
      label: "任务编号",
      key: "task_code",
      table: true,
      search: true,
      form: true,
      required: true,
    },
    {
      label: "任务名称",
      key: "task_name",
      table: true,
      search: true,
      form: true,
      required: true,
    },
    {
      label: "是否选用模板",
      key: "rel_template_flag",
      table: true,
      type: TYPE_ENUM.SELECT,
      storeKey: "yesNo",
      slot: true,
    },
    { label: "上传文件名", key: "item_name", table: true, search: true },
    { label: "创建人", key: "create_person_name", table: true },
    { label: "创建时间", key: "create_date", table: true },
  ]

  const actions = []

  export default {
    mixins: [SearchTableCRUDMixin],
    components: { AppEditableTable },
    data() {
      return {
        columns,
        service,
        actions,
        itemList: [],
      }
    },
    computed: {
      modalTitle() {
        return this.isAddModal ? "添加" : "编辑"
      },
      itemColumns() {
        return [
          {
            label: "要件",
            key: "item_code",
            type: TYPE_ENUM.SELECT,
            required: true,
            options: this.itemList,
          },
          {
            label: "上报类型",
            key: "item_upload_type",
            type: TYPE_ENUM.SELECT,
            required: true,
            storeKey: "itemUploadType",
          },
        ]
      },
    },
    mounted() {
      this.getItemList()
    },
    methods: {
      isNotNullArr(list) {
        // console.log(list, Array.isArray(list) && list.length);
        return Array.isArray(list) && list.length
      },
      async getItemList() {
        const list = (await itemService.getAllList()) || []
        this.itemList = list.map((e) => ({ key: e.id, value: e.item_name }))
      },
      doSubmit() {
        if (this.model.itemList && this.model.itemList.length > 0) {
          if (this.model.itemList.every(row => this.itemColumns.filter(col => col.required).every(col => !!row[col.key]))) {
            this.submit()
          } else {
            this.$message.warning('请填写完整的要件信息')
          }
        } else {
          this.$message.warning('请配置要件')
        }
      },
      handleDelete() {
        //   console.log(this.selectedRows);
        for (let i = 0; i < this.selectedRows.length; i++) {
          if (this.selectedRows[i].templateList.length != 0) {
            this.$message({
              message: "已关联模板的任务不可删除",
              type: "warning",
            })
            return
          }
        }
        if (this.selectedRows.length) {
          this.$alert(`确认删除 ${this.selectedRows.length} 条记录`, "确认删除", {
            confirmButtonText: "确定",
            callback: async (action) => {
              console.log(action)
              if (action === "confirm") {
                const ids = this.selectedRows.map((e) => e.id).join(";");
                (await this.service.delItemByIds(ids)) && this.reload()
              }
            },
          })
        } else {
          this.$message.warning("请选择要删除的记录")
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  @import "~@/assets/css/_variables.scss";

  .temp-item {
    @include flex-start();
    height: 30px;
    line-height: 30px;

    .circ {
      margin-right: 8px;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background-color: #333;
    }
  }
</style>
